<template>
  <vxe-modal height="70vh" :loading="loading" title="查看合同变更" v-model="dialogVisible" width="70%" showFooter show-zoom resize>

    <el-table :header-cell-style="{background:'#d0cece',color:'#000000',fontWeight:'bold'}"
              ref="table" highlight-current-row
              :data="htyqList">
      <!--      <el-table-column type="selection" width="55" align="center" />-->
      <el-table-column label="序号" align="center" type="index" width="50"/>
      <el-table-column show-overflow-tooltip label="合同名称" align="center" prop="htName" >
        <template slot-scope="scope">
          <el-button
            type="text"
            @click="handleButtonClick(scope.row)"
          >
            <el-link type="primary">{{ scope.row.htName }}</el-link>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="合同编号" align="center" prop="htBh" />
      <el-table-column label="申请日期" align="center" prop="sqTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.sqTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="申请单位/项目部" align="center" prop="sqDw" />
      <el-table-column label="变更开始年月" align="center" prop="bgQTime" />
      <el-table-column label="变更截止年月" align="center" prop="bgZNy" />
      <el-table-column show-overflow-tooltip label="申请变更事项" align="center" prop="sqBgSx">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.htbg_sqbg_sx" :value="scope.row.sqBgSx"/>
        </template>
      </el-table-column>
      <el-table-column label="联系电话" align="center" prop="lxPhone" />
    </el-table>

    <!-- 分页组件 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 合同详情 -->
    <HtXq ref="htXq"/>

  </vxe-modal>
</template>

<script>
import {listHtbg} from "@/api/xmgl/htgl/htbg/htbg";
import HtXq from "@/views/xmgl/htgl/htbz/components/HtXq.vue";

export default {
  name: "XmYqCk",
  components: {HtXq},
 //项目延期查看组件
  dicts: ['htbg_sqbg_sx'],
  data() {
    return {
      loading: false,
      dialogVisible: false,
      // 合同延期表格数据
      htyqList: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        idWhere: null,
        htName: null,
        htBh: this.getHtBh,
        sqTime: null,
        sqDw: null,
        lxPhone: null,
        sqBgSx: '延期',
        userId: null,
        deptId: null
      },

    }
  },
  methods: {
    // 查询合同详情信息
    handleButtonClick(row) {
      this.$refs.htXq.handleOpen(row);
    },
    handleOpen(row) {
      this.loading = true;
      this.dialogVisible = true;
      this.getHtBh = row.htBh || row.ktBh || row.xmBh
      this.getList()
    },
    getList() {
      this.queryParams.htBh = this.getHtBh
      listHtbg(this.queryParams).then(response => {
        this.htyqList = response.rows;
        this.total = response.total;
        setTimeout(() => {
        this.loading = false;
        }, 400)
      });
    },
  }
}
</script>

<style scoped>

</style>
